import React, {RefObject, useState} from 'react';
import styled from 'styled-components';
import 'react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker, {DayRange, RenderInputProps} from 'react-modern-calendar-datepicker';
import dayjs from 'dayjs';

type RangeList = 'day' | 'week' | 'month' | 'custom';

type RangeProps = {
    selectedRange: RangeList
}

const StyledRange = styled.div<RangeProps>`
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    > ul {
        display: flex;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        position: relative;
        width: 100vw;
        &::after {
            content: '';
            position: absolute;
            height: 2px;
            width: 25%;
            left: ${(props) => (props.selectedRange === 'day' ? '0' : props.selectedRange === 'week' ? '25%' : props.selectedRange === 'month' ? '50%' : '75%')};
            bottom: 0;
            background: #FD9A16;
            transition: left 0.35s ease;
            z-index: 1;
        }
        > li {
            font-size: 1.5em;
            padding: 5px 0;
            width: 25%;
            line-height: 2em;
            text-align: center;
            color: #BDBDBD;
            transition: color 0.35s ease;
            &.selected {
                color: #FD9A16;
            }
        }
    }
`;

const StyledDatePicker = styled.div`
    .responsive-calendar {
        --cl-color-error: #2966C1;
        font-size: 10px !important;
    }
`

type Props = {
    selectedRange: RangeList,
    onRangeChange: Function,
    selectedDayRange: DayRange
    onDayRangeChange: Function
}

const Range: React.FC<Props> = (props) => {

    const rangeMap = {'day': '按天', 'week': '按周', 'month': '按月', 'custom': '自定义'};
    const [rangeList] = useState<(keyof typeof rangeMap)[]>(['day', 'week', 'month', 'custom']);

    const handleDayRangeChange = (event: DayRange) => {
        console.log(event);
        props.onDayRangeChange(event)
    }

    let today = {
        day: dayjs().date(),
        month: dayjs().month() + 1,
        year: dayjs().year()
    }

    const renderCustomInput: React.FC<RenderInputProps> = ({ ref }) => (
        <input
            readOnly
            ref={ref as RefObject<HTMLInputElement>} // necessary
            placeholder="点击选择时间范围"
            value={props.selectedDayRange.from !== null && props.selectedDayRange.to !== null ? `从  ${props.selectedDayRange.from!.year}-${props.selectedDayRange.from!.month}-${props.selectedDayRange.from!.day}  到  ${props.selectedDayRange.to!.year}-${props.selectedDayRange.to!.month}-${props.selectedDayRange.to!.day}` : ''}
            style={{
                textAlign: 'center',
                fontSize: '1.2em',
                margin: '20px 0',
                padding: '5px 0',
                border: '1px solid #FD9A16',
                borderRadius: '100px',
                // boxShadow: '0 1.5rem 2rem rgba(156, 136, 255, 0.2)',
                color: '#FD9A16',
                outline: 'none',
                width: '80vw'
            }}
            className="my-custom-input-class" // a styling class
        />
    )

    return (<div>
        <StyledRange selectedRange={props.selectedRange}>
            <ul>
                {rangeList.map(range =>
                    <li
                        className={props.selectedRange === range ? 'selected' : ''}
                        key={range}
                        onClick={() => props.onRangeChange(range)}>
                        {rangeMap[range]}
                    </li>
                )}
            </ul>
            <StyledDatePicker>
                {props.selectedRange === 'custom' ?
                    <DatePicker
                        value={props.selectedDayRange}
                        onChange={handleDayRangeChange}
                        shouldHighlightWeekends
                        colorPrimary={"#FD9A16"}
                        colorPrimaryLight={'#FD9A1660'}
                        maximumDate={today}
                        calendarClassName="responsive-calendar"
                        renderInput={renderCustomInput}
                    /> : null
                }
            </StyledDatePicker>
        </StyledRange>
    </div>);
};

export default Range;